html,body{
    height: 100%;
    width: 100%;
    margin: 0px;
    color: aqua;/*在元素内部输入字母会变成相应颜色，也就是指...设置在元素内部生效*/
}
main{
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 40px;/*设置高度,第一行100px,第二行自动，第三行40px*/
    grid-template-columns: 200px auto;/*设置列宽-第一列200px,第二列自动*/
    color: rgb(236, 104, 192);/*后面的会覆盖前面的设置*/
    grid-template-areas: "header header"
    "nav section"
    "footer footer";/*布局，这里我没有使用，所以没用，可删除,使用的是下面的*/
}

.class1{
    width: 100%;
    height: 100%;
    border: 50px;
    border-color: blueviolet;
}
.class2{
    size: 10px;
    color: rgb(196, 71, 71);
}

*{
    /*清除所有盒子的外边距*/
    margin: 0;
    padding: 0;
}
div{
    width: 300px;
    height: 200px;
    background-color: antiquewhite; 
    border: 5px solid mediumpurple;
    padding: 10px 5px 8px 15px;
    margin: 10px;
}
.Boxcontext{

}

.Boxframe{
    margin: 2px 2px 2px 2px;
    overflow: hidden;
    border: 2.5px solid #a9ff1f;
    outline: 2.5px solid #3cb0ff;
}
.class4{
    font: outline;
}
.class5{
    float: left;
}
.link{
    src: url("www.baidu.com");  
}
.class13{

}
.class14{
    
}

#header,#article,#nav,#section,#footer,#aside{
    border:10px rgb(124, 31, 31) solid;
}

#id-main{
    grid-area: main;
}
#id-article{
    grid-area: article;
}
#id-section{
    grid-area: section;
}
#id-nav{
    grid-area: nav;
}
#id-aside{
    grid-area: aside;
}
#id-address{
    grid-area: address;
}
#id-footer{
    grid-area: footer;
}
#id-hgroup{
    grid-area: auto;
}

#id-header{
    grid-area: header;
}

#id1{
    
}

#id1{
    
}

#id1{
    
}

#id1{
    
}
#page {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas: "head head head"
                        "nav nav nav"
                         "article  main aside"
                         "foot foot foot";
    grid-template-rows: 50px 50px 1fr 50px;
    grid-template-columns: 150px 1fr 200px;
  }
   
  #page > header {
    grid-area: head;
    background-color: #8ca0ff;
    border: 5px solid #000000;
  }
  #page > article{
    grid-area: article;
    background-color: #ffffff;
    border: 5px solid #000000;
  }
  #page > aside{
    grid-area:aside;
    background-color: #873bce;
    border: 5px solid #000000;
  }
  #page > nav {
    grid-area: nav;
    background-color: #ffa08c;
    border: 5px solid #000000;
  }
   
  #page > main {
    grid-area: main;
    background-color: #ffff64;
    border: 5px solid #000000;
  }
   
  #page > footer {
    grid-area: foot;
    background-color: #8cffa0;
    border: 5px solid #000000;
  }